<template>
  <view class="padding-sm">
    <!-- 操作条 -->
    <view class="app-header">
      <view class="operation-bar cu-bar bg-white">
        <view class="action">
          <text class="cuIcon-titles text-cyan"></text>
          <text class="text-xl text-bold">我的评测</text>
        </view>
      </view>
      <!-- 索引条 -->
      <ill-sub @clickSub="changeSub" ref="mySub"></ill-sub>
    </view>
    <!-- 历史集合 -->
    <view class="question-list cu-timeline" v-if="questionList && questionList.length > 0">
      <block v-for="(item, index) in questionList" :key="index">
        <view class="cu-item" @click="gateToDetail(item.id)">
          <view class="content">
            <view class="flex-container">
              <view>{{item.createTime}} {{item.title}}</view>
              <view class="icon-container text-lg">
                <text class="lg text-lg cuIcon-right"></text>
              </view>
            </view>
          </view>
        </view>
      </block>
    </view>
    <view v-else>
      <empty-page container-height="100px" text="暂无我的评测" />
    </view>
    <view style="height: 20px;"></view>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        queryObj: {
          subId: null
        },
        questionList: [],
        firstLoad: true,
        isLoading: false
      };
    },
    onShow() {
      if (!this.firstLoad) {
        this.fetchData();
      }
    },
    methods: {
      onPullDownRefresh() {
        this.fetchData();
      },
      gateToDetail(id) {
        uni.navigateTo({
          url: `/subpkg/evaluation_detail/evaluation_detail?id=${id}`
        })
      },
      changeSub(subId) {
        this.queryObj.subId = subId;
        this.fetchData();
      },
      async fetchData() {
        if (this.isLoading) {
          uni.$showMsg("正在玩命加载中!");
          return;
        }
        this.isLoading = true;
        const {
          data: res
        } = await uni.$http.get('/evaluation/list', this.queryObj)
        // 判断是否获取失败
        if (res.code !== 200) return uni.$showMsg()
        if (res.data && res.data.length > 0) {
          this.questionList = res.data.reverse();
        }
        if (this.firstLoad) {
          this.firstLoad = false;
        }
        this.isLoading = false;
      }
    }
  }
</script>

<style lang="scss">
  .app-header {
    margin-bottom: 20px;
    border-radius: 5px;
    padding: 5px;
    height: 110px;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 999;
  }

  .question-list {
    margin-top: 20px;
    border-radius: 8px;
    position: relative;

    .flex-container {
      display: flex;
      flex-direction: row;
      align-items: center;
    }

    .icon-container {
      color: #888888;
      /* 设置为您希望的浅黑色值 */
      margin-left: auto;
    }
  }
</style>